<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-3)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{$t('Page.notify.title')}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
		</match-media>
		<view class="content" v-if="detailInfo">
			<pc-nav-bar :pageName="$t('Page.notify.title')"> </pc-nav-bar>
			<image v-if="detailInfo.image" class="banner" :src="detailInfo.image" @click="handleJump(detailInfo.url)"
				mode="widthFix"></image>
			<view class="title">
				{{detailInfo.title}}
			</view>
			<view class="time">
				{{ $tools.timeFormat(detailInfo.startTime, 'hh:MM yyyy/mm/dd')}}
			</view>
			<view class="desc" v-if="detailInfo.content">
				<rich-text :selectable="true" :nodes="detailInfo.content"></rich-text>
			</view>
		</view>
	</view>
</template>
<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				activeId: '',
				detailInfo: null
			}
		},
		onLoad(option) {
			console.log("option.item: ", option.item);
			if (option.item) {
				const item = JSON.parse(decodeURIComponent(option.item));
				if (item.isNotice) {
					this.detailInfo = item
					return
				}
			} else if (option.id) {
				this.activeId = option.id
				this.getActiveDetail()
			}
		},
		methods: {
			getActiveDetail() {
				const {
					GETINFO
				} = this.$api
				sendMessage({
					flag: GETINFO,
					content: {
						id: this.activeId
					}
				})
				uni.$once(GETINFO, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.detailInfo = data
					}
				})
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			handleJump(url) {
				if (!url) return;
				// #ifdef APP
				plus.runtime.openURL(url)
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 默认样式 结构   
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.content {
			width: 100%;
			min-height: calc(100vh - 50px);
			padding: 0 15px 65px;
			background: var(--bg-3);
			box-sizing: border-box;

			.banner {
				width: 100%;
				max-height: 345px;
				margin-top: 10px;
				border-radius: 10px;
				cursor: pointer;
			}

			.title {
				font-size: 16px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FF8A4A;
				line-height: 22px;
				margin-top: 15px;
				word-break: break-all;
			}

			.time {
				font-size: 12px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #5F73A3;
				line-height: 17px;
				margin-top: 10px;
			}

			.desc {
				margin-top: 15px;
				word-break: break-all;
				font-size: 16px;
				color: #A1A1A1;
			}
		}
	}

	// PC
	@media screen and (min-width: 768px) {

		.page-wrap {
			padding-top: 70px;

			.pc-back {
				width: 100%;
				padding: 0 30px;
				height: 60px;
				display: flex;
				align-items: center;
				background: var(--bg-24);
				border-radius: 30px;
				margin: 10px auto 0;
				cursor: pointer;
				box-sizing: border-box;

				.back-cont {
					display: flex;
					align-items: center;
					height: 30px;
					padding: 0 10px;
					border-radius: 100px;
					background: var(--bg-25);

					.back-icon {
						width: 13px;
						height: 11px;
						background: url('@/static/image/back-icon.png') no-repeat;
						background-size: contain;
					}

					.back-text {
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 18px;
						margin-left: 5px;
					}
				}

				.page-title {
					width: fit-content !important;
					margin-left: 15px;
				}
			}

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 15px 30px 30px;
				box-sizing: border-box;

				.banner {
					max-width: 900px;
					max-height: 450px;
					margin-top: 20px;
					border-radius: 10px;
				}
			}
		}
	}
</style>